<template>
  <div class="box">
    {{ a + b }}
  </div>
  <div id="main"></div>
  <div>
    <button @click="add">添加</button>
  </div>
</template>
<script>
  import zrender from '@/libs/zrender/zrender.js'
  export default {
    data() {
      return {
        a: 1,
        b: 2
      }
    },
    methods: {
      add() {
        console.log(`helloworld`)
      }
    },
    mounted() {
      let main = zrender.init(document.getElementById('main'), {
        width: 300,
        height: 300
      })
      let maskRect = new zrender.Group()
      let maskRect_1 = new zrender.Rect({
        shape: {
          width: 100,
          height: 100
        },
        position: [0, 0],
        style: {
          fill: 'rgba(255,255,255,0.7)'
        }
      })

      let maskRect_center = new zrender.Rect({
        shape: {
          width: 80,
          height: 80
        },
        position: [10, 10],
        style: {
          blend: 'destination-out'
        }
      })

      maskRect.add(maskRect_1).add(maskRect_center)

      let rect = new zrender.Rect({
        shape: {
          width: 100,
          height: 100
        },
        style: {
          fill: 'red',
          blend: 'destination-over'
        }
      })
      let textRect = new zrender.Rect({
        style: {
          text: '测试',
          textFill: 'black',
          font: 'normal normal 12px Arial',
          //fontSize: '12px',
          //fontWeight: 'bold',
          //fontFamily: 'Arial',
          textPosition: [0, 0],
          textLineHeight: 20,
          fill: 'rgba(0,0,0,0.3)'
        },
        position: [0, 0],
        shape: {
          height: 20,
          width: 100
        }
      })

      main.add(maskRect)
      main.add(rect)
      main.add(textRect)
    }
  }
</script>
<style type="text/css">
  .box {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
  }
</style>
